<template>
	<view>
		<!-- 搜索框 -->
		<view style="margin-top: 20rpx; padding-left:20rpx">
			<u-search :show-action="true" shape="square" actionText="搜索"></u-search>
		</view>
		<!-- 列表分类 -->
		<view class="tabs">
			<u-tabs :list="titleList" lineColor="#FF6900">
				<view slot="right" style="padding-left: 8rpx;" @tap="$u.toast('插槽被点击')">
					<u-icon name="list" size="21" bold></u-icon>
				</view>
			</u-tabs>
		</view>
		<!-- 商品信息 -->
		<view v-if="shopList.length==0">
			<u-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png">
			</u-empty>
		</view>
		<view class="shopList" v-else>
			<view class="shopBox" v-for="item in shopList" :key="item.id" @click="toDetail(item.id)">
				<view class="imgBox">
					<image :src="baseUrl+item.img" mode=""></image>
				</view>
				<view class="textBox">
					<view class="title">
						{{item.goodsname}}
					</view>
					<view class="price">
						现价格：￥{{item.price}}
					</view>
					<view class="oldprice">
						原价格：￥{{item.market_price}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入基础地址
	import baseUrl from "@/request/baseUrl.js"
	//引入接口地址
	import {
		getGoodlist,
		getSearch
	} from "../../request/app.js"
	export default {
		data() {
			return {
				shopList: [],
				baseUrl: baseUrl,
				titleList: [{
					name: "综合排序"
				}, {
					name: "价格"
				}, {
					name: "好评"
				}, {
					name: "销量"
				}, {
					name: "店铺"
				}, {
					name: "排序"
				}]
			}
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + id
				})
			}
		},
		//页面一加载
		onLoad(options) {
			console.log(options);
			// 判断是跳转是否为搜素
			if (options.val) {
				getSearch({
					keywords: options.val
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.shopList = res.data.list ? res.data.list : []
					}
				})
			} else {
				//获取二级分类列表响应
				getGoodlist({
					cateid: options.pid || options.id,
					type: 1
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.shopList = res.data.list.goodData
					}
				})
			}
		}
	}
</script>

<style>
	.shopList {
		padding: 20rpx;
		background-color: #F7F7F7;
	}

	.shopBox {
		height: 300rpx;
		margin-bottom: 20rpx;
		background-color: #FFF;
		padding: 20rpx 10rpx;
		display: flex;
		border-radius: 20rpx;
	}

	.shopBox>.imgBox {
		padding-right: 40rpx;
	}

	.shopBox>.imgBox>image {
		width: 250rpx;
		height: 300rpx;
	}

	.shopBox>.textBox {
		font-size: 30rpx;
		padding-top: 40rpx;
	}

	.shopBox>.textBox>.title {
		font-size: 30rpx;
		font-weight: bold;
		height: 80rpx;
		overflow: hidden;
	}

	.shopBox>.textBox>.price {
		font-weight: bold;
		color: #FF3333;
		font-size: 36rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.shopBox>.textBox>.oldprice {
		text-decoration: line-through;
		margin-bottom: 20rpx;
		color: #66666d;
	}

	.tabs {
		padding: 20rpx;
	}
</style>
